<template>
	<div class="bt-close-btn" @click="handleClose">
		<div class="close-icon"></div>
	</div>
</template>

<script lang="ts" setup>
const emit = defineEmits<{
	click: [value: Event]
}>()

const handleClose = (e: Event) => {
	emit('click', e)
}
</script>

<style lang="scss" scoped>
.bt-close-btn {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 1000;
	.close-icon {
		position: absolute;
		top: -28px;
		right: -28px;
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background-image: url('');
		background-position: center;
		transition: all 0.4s ease-in-out;
		cursor: pointer;
		&:hover {
			transform: rotate(180deg);
			background-image: url('');
		}
	}
}
</style>
